<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            border: 1px solid green;
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <input type="file" name="" id="" />
    图片拖拽上传预览
    <div id="box">
        <img src="" id="img" alt="">
    </div>

    <script>
        /*
            拖拽一个图片到 html,用户可以预览图片
        
        */
        var oBox = document.querySelector('#box');
        var oImg = document.querySelector('img');


        oBox.ondragover = function (ev) {
            //想要触发 drop 必须在 dragover的时候阻止默认事件
            ev.preventDefault();

        }
        //给 目标元素绑定 drop事件
        oBox.ondrop = function (ev) {
            console.log("拖拽结束了");
            //阻止拖过来的图片在浏览器默认打开一页的行为
            ev.preventDefault();

            //预览图片
            var f = ev.dataTransfer.files;
            console.log(f);
            //读取文件信息
            var fd = new FileReader;//创建文件读取对象

            fd.readAsDataURL(f[0]);//将图片读取为 base64的url格式
            fd.onload = function () {//图片都加载完之后，执行大括号里面的代码
                console.log(this);
                //如果拖过来的不是图片,需要提示
                if (f[0].type.indexOf('image') !== -1) {
                    oImg.src = this.result;
                } else {
                    alert("请拖拽一张图片过来");
                }
            }
        }

        //注意：chrome浏览器有可能不支持
    </script>
</body>

</html>